<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 表单 -->
      <el-form label-width="80px" size="small">
        <el-form-item label="学科 : ">
          <el-select v-model="reqParams.subjectID" placeholder="请选择" style="width:420px">
            <el-option
              v-for="item in subject"
              :key="item.id"
              :label="item.subjectName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录 : ">
          <el-select v-model="reqParams.catalogID" placeholder="请选择" style="width:420px">
            <el-option
              v-for="item in dirlist"
              :key="item.id"
              :label="item.directoryName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业 : ">
          <el-select v-model="reqParams.enterpriseID" placeholder="请选择" style="width:420px">
            <el-option
              v-for="item in company"
              :key="item.id"
              :label="item.shortName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市 : ">
          <el-select v-model="reqParams.city" placeholder="请选择" @change="handleProvince">
            <el-option v-for="item in provinces" :key="item" :label="item" :value="item"  >{{item}}</el-option>
          </el-select>
          <el-select v-model="city" placeholder="请选择">
            <el-option
              v-for="item in citys"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向 : ">
          <el-select v-model="reqParams.direction" placeholder="请选择" style="width:420px">
            <el-option v-for="item in direction" :key="item" :label="item" :value="item">{{item}}</el-option>
          </el-select>
        </el-form-item>
        <!-- 单选按钮 -->
        <el-form-item label="题型 : ">
          <el-radio-group v-model="reqParams.questionType">
            <el-radio  :label="'单选'">单选</el-radio>
            <el-radio  :label="'多选'">多选</el-radio>
            <el-radio  :label="'简答'">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度 : ">
          <el-radio-group v-model="reqParams.difficulty">
            <el-radio :label="'简单'">简单</el-radio>
            <el-radio :label="'一般'">一般</el-radio>
            <el-radio :label="'困难'">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 题干富文本 -->
        <p style="font-size:12px">题干：</p>
        <el-form-item label-width="20px" style="width:800px">
          <quill-editor :options="editorOption" v-model="reqParams.question"></quill-editor>
        </el-form-item>
        <!-- 选项 -->
        <p style="fontSize:12px">选项 (以下选中的选项为正确答案)</p>
        <!-- ----------单选----------------- -->
        <el-form-item v-if="reqParams.questionType == '单选'">
          <div class="option">
            <el-radio v-model="radio" :label="0" @change="radioChange">
              <span>A :</span>
            </el-radio>
            <el-input v-model="reqParams.options[0].title"></el-input>
            <my-images v-model="reqParams.options[0].imgUrl"></my-images>
            <br />
            <el-radio v-model="radio" :label="1" @change="radioChange">
              <span>B :</span>
            </el-radio>
            <el-input v-model="reqParams.options[1].title"></el-input>
            <my-images></my-images>
            <br />
            <el-radio v-model="radio" :label="2" @change="radioChange">
              <span>C :</span>
            </el-radio>
            <el-input v-model="reqParams.options[2].title"></el-input>
            <my-images></my-images>
            <br />
            <el-radio v-model="radio" :label="3" @change="radioChange">
              <span>D :</span>
            </el-radio>

            <el-input v-model="reqParams.options[3].title"></el-input>
            <my-images></my-images>
          </div>

          <el-button type="text" @click="optionVisible = true">+添加选项与答案</el-button>
          <el-dialog title="收货地址" :visible.sync="optionVisible">
            <el-form>
              <el-form-item label="选项" label-width="50px">
                <el-input v-model="add.title" style="margin-left:0px"></el-input>
                <my-images v-model="add.imgUrl"></my-images>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="optionVisible = false">取 消</el-button>
              <el-button type="primary" @click="addoption">确 定</el-button>
            </div>
          </el-dialog>
        </el-form-item>
        <!-- ------------多选---------------- -->
        <el-form-item v-else-if="reqParams.questionType == '多选'">
          <el-checkbox-group v-model="checkList" class="option">
            <el-checkbox :label="0" @change="checkboxChange">
              <span>A :</span>
            </el-checkbox>
            <el-input v-model="reqParams.options[0].title"></el-input>
            <my-images v-model="reqParams.options[0].imgUrl"></my-images>
            <br />
            <el-checkbox :label="1" @change="checkboxChange">
              <span>B :</span>
            </el-checkbox>
            <el-input v-model="reqParams.options[1].title"></el-input>
            <my-images v-model="reqParams.options[1].imgUrl"></my-images>
            <br />
            <el-checkbox :label="2" @change="checkboxChange">
              <span>C :</span>
            </el-checkbox>
            <el-input v-model="reqParams.options[2].title"></el-input>
            <my-images v-model="reqParams.options[2].imgUrl"></my-images>
            <br />
            <el-checkbox :label="3" @change="checkboxChange">
              <span>D :</span>
            </el-checkbox>
            <el-input v-model="reqParams.options[3].title"></el-input>
            <my-images v-model="reqParams.options[3].imgUrl"></my-images>
            <br />
          </el-checkbox-group>

          <el-button type="text" @click="optionVisible = true">+添加选项与答案</el-button>
          <!--  添加选项的组件 -->
          <el-dialog title="收货地址" :visible.sync="optionVisible">
            <el-form>
              <el-form-item label="选项" label-width="50px">
                <el-input v-model="add.title" autocomplete="off"></el-input>
                <my-images v-model="add.imgUrl"></my-images>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="optionVisible = false">取 消</el-button>
              <el-button type="primary" @click="addoption">确 定</el-button>
            </div>
          </el-dialog>
        </el-form-item>

        <!-- 富文本 -->
        <el-form-item v-else-if="reqParams.questionType == '简答'" style="width:800px"></el-form-item>

        <!-- 解析视频 -->
        <el-form-item label="解析视频 : ">
          <el-input placeholder="请输入内容" v-model="reqParams.videoURL" style="width:500px">
            <template slot="prepend">Http://</template>
          </el-input>
        </el-form-item>
        <!-- 解析答案富文本 -->
        <p style="font-size:12px">答案解析：</p>
        <el-form-item label-width="20px" style="width:800px" v-model="reqParams.answer">
          <quill-editor :options="editorOption" v-model="reqParams.answer"></quill-editor>
        </el-form-item>
        <!-- 题目备注  文本域 -->
        <p style="font-size:12px">题目备注：</p>
        <el-form-item
          prop="desc"
          style="width:600px"
          label-width="20px"
        >
         <quill-editor :options="editorOption"  v-model="reqParams.remarks"></quill-editor>
          <!-- <el-input type="textarea" :rows="8"></el-input> -->
          <!-- <el-input type="textarea" v-model="ruleForm.desc"></el-input> -->
        </el-form-item>
        <!-- 试题标签 -->
        <el-form-item label="试题标签 : " label-width="120px" v-model="reqParams.tags">
          <!-- <el-input placeholder="请选择" style="width:420px"></el-input> -->
          <el-select v-model="reqParams.tags" placeholder="请选择" style="width:420px">
            <el-option v-for="item in tags" :key="item.id" :label="item.tagName" :value="item.tagName"></el-option>
          </el-select>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
          <el-button type="primary" @click="resdata">提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
// 导入富文本
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

import { add } from '@/api/hmmm/questions'
// 导入方法
import { list } from '@/api/hmmm/subjects'
import { list as dirlist } from '@/api/hmmm/directorys'
import { list as complist } from '../../api/hmmm/companys'
import { list as taglist } from '../../api/hmmm/tags'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'

// import { status } from '@/api/hmmm/constants'
// import { list, remove, detail, disabled } from '@/api/hmmm/companys'
import { provinces, citys } from '@/api/hmmm/citys.js'

// import Dialog from './../components/companys-add'
// 导入插槽
import Myimges from '../components/my-images'
export default {
  name: 'QuestionsNew',
  components: {
    'my-images': Myimges,
    quillEditor
  },
  // 声明数据

  data() {
    return {
      // 下拉框

      value: [],
      radio: 0,
      // 默认选中难度中的一般
      checkList: [0],

      optionVisible: false,
    
      add: {},
      subject: {},
      dirlist: {},
      company: {},
      difficulty: [],
      questionType: [],
      direction: [],
      tags: {},
      citys: [],
      city: '',
      provinces: [],
        // 数据
      reqParams: {
        city: '',
        subjectID: '',
        catalogID: '',
        enterpriseID: '',
        direction: '',
        questionType: '单选',
        difficulty: '简单',
        question: '',
        options: [
          { code: 'A', title: '', imgUrl: '', isRight: true },
          { code: 'B', title: '', img: '', isRight: false },
          { code: 'C', title: '', img: '', isRight: false },
          { code: 'D', title: '', img: '', isRight: false }
        ],

        videoURL: '',
        answer: '',
        remarks: '',
        tags: '',
        province: ''
      },

      // ruies: {
      //   desc: [{ required: true, message: '', trigger: 'blur' }]
      // },
      // 富文本配置对象
      editorOption: {
        placeholder: '',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ indent: '-1' }, { indent: '+1' }],
            ['image']
          ]
        }
      }
    }
  },
  created() {
    this.createAPIlist()
    this.getCityData()
    this.getdirlist()
    this.getcomplist()
    this.getDatas()
    this.getTags()
  },
  // 事件
  methods: {
    // 单选框变化时候的回调函数
    radioChange() {
      console.log(this.radio)
      // this.reqParams.options.isRight = 'false'
      this.reqParams.options.forEach(element => {
        element.isRight = false
      })
      this.reqParams.options[this.radio].isRight = true
    },
    // 多选变化时候的函数
    checkboxChange() {
      this.reqParams.options.forEach(element => {
        element.isRight = false
        this.checkList.forEach(element => {
          this.reqParams.options[element].isRight = true
        })
      })
    },
    // 添加数据
    addoption() {
      this.reqParams.options.push(this.add)
    },

    // 1.获取学科
    async createAPIlist() {
      // var pagesize = 5000
      const {
        data: { items }
      } = await list({ pagesize: 50 })

      this.subject = items
      //  console.log(items)
    },
    // 2.获取目录
    async getdirlist() {
      const {
        data: { items }
      } = await dirlist({ pagesize: 5000 })
      // console.log(items)
      this.dirlist = items
    },
    // 3.获取公司
    async getcomplist() {
      const {
        data: { items }
      } = await complist({ list: 500 })
      this.company = items
    },
    // 4. 获取城市
    getCityData: function() {
      // let province = provinces()
      // console.log(province)
      // console.log(this.mydata)
      this.provinces = provinces()
      this.reqParams.city = this.provinces[0]
    },
    // 4.2 获取市
    handleProvince(e) {
      this.citys = citys(e)
     this.city = this.citys[0]
      
    },
    // 5.获取题型，难度 题干
    getDatas() {
      // this.difficulty = difficulty
      // this.questionType = questionType
      this.direction = direction
      console.log(this.direction)
    },
    // 6.获取标签列表
    async getTags() {
      const {
        data: { items }
      } = await taglist({ pagesize: 500 })
      this.tags = items
    },
    // 获取数据
    async resdata() {
      const data = await add(this.reqParams)
      console.log(data)
      this.$message.success('添加成功')
    }
  }
}
</script>

<style lang="scss" scoped>
// deep  强制覆盖样式
.ql-toolbar .ql-snow {
  padding: 0 10px;
}
 .ql-editor {
  height: 200px;
  width: 600px;
}
.el-radio,
.el-checkbox {
  margin: 5px 0;
  // z-index: -1;
}
.option {
  width: 360px;
  position: relative;
  line-height: 50px;
  overflow: hidden;
}
</style>
